<template>
    <div id="register">
        <!-- 按钮 -->
        <el-popover placement="bottom-start" width="820" style="box-shadow: 0 0 8px rgba(0,0,0,.5);" trigger="click">
            <el-form :inline="true" label-width="90px" :model="searchList" class="demo-ruleForm">
                <el-form-item label="登记号" style="margin-bottom: 0;"><el-input v-model="searchList.registerNo"  style="width: 100px;"></el-input></el-form-item>
                <el-form-item label="身份证号" style="margin-bottom: 0;"><el-input v-model="searchList.idNo"  style="width: 100px;"></el-input></el-form-item>
                <el-form-item label="献浆员卡号" style="margin-bottom: 0;"><el-input v-model="searchList.cardId"  style="width: 100px;"></el-input></el-form-item>
                <el-form-item label="分配机号" style="margin-bottom: 0;"><el-select v-model="searchList.macCode"  style="width: 100px;"><el-option value="" label="【空】"></el-option><el-option v-for="item in machineCodeData" :key="item.id" :value="item.id" :label="item.name"></el-option></el-select></el-form-item>
                <el-form-item label="登记时间" style="margin: 5px 0 0;"><el-date-picker v-model="searchList.time"  type="daterange" style="width: 305px;" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" align="right"></el-date-picker></el-form-item>
                <el-button type="primary" @click="submitSearchData" style="margin: 7px 0 0 35px;padding: 7px 15px;">提交</el-button>
            </el-form>
            <el-button slot="reference" type="primary">查询</el-button>
        </el-popover>

        <el-table :data="tableData" stripe border class="company-table" :height="tableHeight" style="width: 100%;" :header-cell-style="getRowClass" v-loading="loading">
            <el-table-column fixed type="index" label="*" sortable align="center" min-width="40"></el-table-column>
            <el-table-column prop="registerNo" label="登记号" sortable min-width="130"></el-table-column>
            <el-table-column prop="registerIdx" label="登记序号" sortable min-width="110"></el-table-column>
            <el-table-column prop="cardId" label="卡号" sortable min-width="90"></el-table-column>
            <el-table-column prop="providerNoName" label="献浆人" sortable min-width="90"></el-table-column>
            <el-table-column prop="idNo" label="身份证号" sortable min-width="170"></el-table-column>
            <el-table-column prop="rzfsName" label="认证方式" sortable min-width="110"></el-table-column>
            <el-table-column prop="machineCodeName" label="分配机器号" sortable min-width="120"></el-table-column>
            <el-table-column prop="name" label="照片比值" sortable min-width="110"></el-table-column>
            <el-table-column prop="regNurseName" label="登记护士" sortable min-width="110"></el-table-column>
            <el-table-column prop="regTime" label="登记时间" sortable min-width="160"></el-table-column>
            <el-table-column fixed="right" label="操作" sortable align="center" min-width="80">
                <template slot-scope="scope">
                    <el-button  @click="updateDialog(scope.row)" type="text" size="small">编辑</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pagination.currentPage" :page-sizes="[10, 15,20, 25,30,50, 100]" :page-size="pagination.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="pagination.total"></el-pagination>

        <!-- 详情 -->
        <el-dialog :title="dialogTitle" :visible.sync="isDialog" width="750px" top="60px"  :close-on-click-modal="false" >
            <el-row :gutter="20" style="margin-right: 0;height: 290px;" >
                <el-col :span="11" style="text-align: center;">
                    <p style="margin-bottom: 10px;">建档照片</p>
                    <img :src="dialogList.createPhoto" style="width: 190px; height: 240px; margin: 0 auto;" />
                </el-col>
                <el-col :span="2"> &nbsp;</el-col>
                <el-col :span="11" style="text-align: center;">
                    <p style="margin-bottom: 10px;">登记照片</p>
                    <img :src="dialogList.regPhoto" style="width: 190px; height: 240px; margin: 0 auto;"  />
                </el-col>
            </el-row>
            <h3 class="dialog-plate-title"><span>基本信息</span></h3>
            <el-form :inline="true" :model="dialogList" label-width="120px" class="demo-ruleForm">
                <el-form-item label="卡号"><el-input v-model="dialogList.cardId" disabled></el-input></el-form-item>
                <el-form-item label="姓名"><el-input v-model="dialogList.providerNoName" disabled></el-input></el-form-item>
                <el-form-item label="年龄"><el-input v-model="dialogList.age" disabled></el-input></el-form-item>
                <el-form-item label="性别"><el-input v-model="dialogList.sex" disabled></el-input></el-form-item>
                <el-form-item label="身份证号"><el-input v-model="dialogList.idNo" disabled></el-input></el-form-item>
                <el-form-item label="认证方式"><el-input v-model="dialogList.rzfsName" disabled></el-input></el-form-item>
                <el-form-item label="照片比值"><el-input v-model="dialogList.thresholdValue" disabled></el-input></el-form-item>
                <el-form-item label="分配机器号"><el-input v-model="dialogList.machineCodeName" disabled></el-input></el-form-item>
            </el-form>
            <h3 class="dialog-plate-title"><span>登记信息</span></h3>
            <el-form :inline="true" :model="dialogList" label-width="120px" class="demo-ruleForm">
                <el-form-item label="登记号"><el-input v-model="dialogList.registerNo" disabled></el-input></el-form-item>
                <el-form-item label="登记序号"><el-input v-model="dialogList.registerIdx" disabled></el-input></el-form-item>
                <el-form-item label="登记时间"><el-input v-model="dialogList.regTime" disabled></el-input></el-form-item>
                <el-form-item label="登记护士"><el-input v-model="dialogList.regNurseName" disabled></el-input></el-form-item>
            </el-form>
            <div slot="footer"></div>
        </el-dialog>


    </div>
</template>

<script>
import api from '@/axios/api.js';
    export default {
        name: "register",
        data(){
            return {
                tokenId: sessionStorage.getItem("tokenId"),
                activeName:'1',
                tableHeight: document.documentElement.clientHeight - 160,
                tableDataTotal:0,
                tableData:[],
                loading:false,
                searchList:{
                    providerName:null,
                    cardId:null,
                    idNo:null,
                    macCode:null,
                    registerNo:null,
                    time:"",
                },
                //分页相关参数
                pagination:{
                    currentPage:1,
                    pageSize:10,
                    total:0
                },
                //详情
                isDialog:false,
                dialogTitle:'',
                dialogList:{
                    age: '',
                    assayCall: '',
                    assayPass: '',
                    assayTime: '',
                    bodyCheckCall: '',
                    bodyCheckPass: '',
                    bodyCheckTime: '',
                    cardId: '',
                    cjCertification: '',
                    cjsh: '',
                    collectionEndTime: '',
                    collectionStartTime: '',
                    createPhoto: '',
                    createTime: '',
                    fiveStepNurseId: '',
                    fiveStepNursename: '',
                    fpCertification: '',
                    id: '',
                    idNo: '',
                    machineCode: '',
                    machineCodeName: '',
                    managerNurseId: '',
                    managerNurseName: '',
                    needAssay: '',
                    needXqdy: '',
                    photoCertification: '',
                    providerNo: '',
                    providerNoName: '',
                    regNurse: '',
                    regNurseName: '',
                    regPhoto: '',
                    regTime: '',
                    regTimeId: '',
                    registerIdx: '',
                    registerNo: '',
                    rzfs: '',
                    rzfsName: '',
                    sex: '',
                    thresholdValue: '',
                    xqdyId: '',
                    zwsh: '',
                },

            }
        },
        created() {
            this.getData();
            this.getMachineCodeData();
        },
        methods: {
            getData( data ) {
                 let _this = this;

                let list = {
                    currentPage:_this.pagination.currentPage,
                    pageSize: _this.pagination.pageSize,
                    startTime: _this.timestampToTime(_this.searchList.time?  _this.searchList.time[0]:new Date()).substr(0,10),
                    endTime:this.timestampToTime( this.searchList.time? this.searchList.time[1] : new Date(new Date().getTime() + 24*60*60*1000)).substr(0,10),
                    providerName:_this.searchList.providerName,
                    cardId:_this.searchList.cardId,
                    idNo:_this.searchList.idNo,
                    macCode:_this.searchList.macCode,
                    registerNo:_this.searchList.registerNo,
                };
                _this.loading=true;
                api.providerReg(list).then(res=>{
                    _this.loading=false;
                    _this.pagination.total= res.content.total;
                    _this.tableData = res.content.records;
                },error=>{
                    _this.loading=false;
                })
            },
            submitSearchData(){
                    this.pagination.currentPage=1;
                    this.getData();
            },
            updateDialog(row){
                this.isDialog = true;
                this.dialogTitle = '详情信息';
                this.dialogList = row;
            },
            handleSizeChange(size) {
                 this.pagination.currentPage=1;
                this.pagination.pageSize = size;
                this.getData();
            },
            handleCurrentChange(currentPage) {
                this.pagination.currentPage = currentPage;
                this.getData();
            }
        },
    }
</script>

<style scoped>


</style>

